<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!--基于框架引入的css-->
		<link href="../libs/css/mui.min.css" rel="stylesheet" />
		
		<!--自定义样式引入-->
		<link href="../css/common.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/icons-extra.css" />
		
		<link href=" ../css/active.css" rel="stylesheet" />
		<link href=" ../css/my.css" rel="stylesheet" />
		<style type="text/css">
			.mui-backdrop {
				position: fixed;
				z-index: 0;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				background-color: rgba(0, 0, 0, .3);
				z-index: 11;
			}
			.mui-popover .mui-table-view{
				    top: 0; 
     				width:300px; 
			}
		.tcc {
				width: calc(100% - 20%);
				height: 300px;
				position: fixed;
				top: 40%;
				left: 10%;
				right: 10%;
				text-align: center
			}
		</style>
	</head>

	<body>
			<!--下拉刷新容器-->
			<div class="mui-content index" id="active" v-cloak="">
			<div class="header-content mui-clearfix" >
				<div class="mui-clearfix header-icons">
					<div class="mui-clearfix">
								<span class=" mui-icon mui-icon-gear mui-pull-left"></span>
		    		<span class="mui-icon-extra mui-icon-extra-sweep mui-pull-right" id="scan"></span>
					</div>
			
		    		<div class="mui-subtitle mui-clearfix"><h3 class="mui-pull-left">活动列表</h3><span class="mui-pull-right" @tap="goActiveList">更多<i class="mui-icon mui-icon-arrowright"></i></span></div>
				</div>
			    <!--数据列表-->
			    <ul class="mui-table-view mui-table-view-chevron">
			    	<div class="mui-card" >
			    		<div @click="gotoDatail" >
			    			<div class="mui-card-title">贵阳省投资促进局</div>
			    			<div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(../img/active/默认图片大@2x.png)"></div>
			    		</div>
			    		<div class="mui-card-content">
			    			<div class="mui-card-content-inner">
			    				<div class="mui-row">
			    					<p>活动时间:</p>
			    					<div>{{list.startTime}}~{{list.endTime}} <span></span></div>
			    				</div>
			    				<div class="mui-row">
			    					<p>活动地点:</p>
			    					<div class="mui-ellipsis">{{list.addressZh}}<span class="mui-icon mui-icon-locate"></span></div>
			    				</div>
			    				<div class="mui-row">
			    					<p >已经报名:</p>
			    					<div class="box-flex"><div class="flex-1">{{list.joinCount}}</div><div class="flex-1 mui-text-center">{{ifEnd}}</div><div class="flex-1 mui-text-right" @click="bm" v-bind:class="[list.isJoin=='0'? 'text-blue': '' ]">{{list.isJoin|joinTypeFilter}}</div></div>
			    				</div>
			    			</div>
			    		</div>
			    	</div>
			    	<div class="mui-subtitle mui-clearfix"><h3 class="mui-pull-left">邀请函</h3><span class="mui-pull-right">更多<i class="mui-icon mui-icon-arrowright"></i></span></div>
			    	
			    	<div class="mui-card">
			    		<div class="mui-card-content reputation">
			    			<div class="mui-row">
			    				<div class="mui-col-xs-4 ">
			    					<img src="../../img/active/img@3x.png" alt="" style="width:100%"/>
			    				</div>
			    				<div class="mui-col-xs-8">
			    					<div>照片你哥哥公司噶价格水平国家</div>
			    					<div class="date">2018-09-09</div>
			    				</div>
			    			</div>
			    		</div>
			    	</div>
			    </ul>
			  </div>
			  <div id="popover" class="mui-popover tcc" style="height: 100px;">
					<div class="mui-popover-arrow"></div>
					<div style="text-align: center; margin-top: 10px;">选择报名方式</div>
					<ul class="mui-table-view">
						<li class="mui-table-view-cell"  @click="person">
							<a href="#">机构报名</a>
						</li>
						<li class="mui-table-view-cell"  @click="jg">
							<a href="#">个人报名</a>
						</li>
					</ul>
				</div>
			  </div>
		<script src="../libs/js/jquery-3.2.1.min.js"></script>
		<script src="../libs/js/mui.min.js"></script>
		<script src="../libs/js/vue.min.js"></script>
		<script src="../js/common.js"></script>
		<script src="../js/config.js"></script>
		<script src="../js/active/investigate.js"></script>
	</body>

</html>